<template>
	<view class="">
		<view class="flex justify-center align-center">
			<view v-show="login_username==''" class="w-70 mt-10">
				<t-form ref="form">
					<t-field name="username" required label="账号" labelIcon="deleteuser">
						<t-input v-model="username" color="base" placeholder="请输入账号" />
					</t-field>

					<t-field name="password" required label="密码" labelIcon="lock">
						<t-input v-model="password" color="base" type="password" placeholder="请输入密码" />
					</t-field>
				</t-form>
				<view class="mt-2 text-center">
					<t-btn color="primary" size="w-65" @click="sumbit">{{submitText.btntext}}</t-btn>
				</view>
				<view class="mt-2 flex justify-between m-2 text-base">
					<t-btn size="xs" ghost rounded="2xl" @click="submitState">{{submitText.smalltext}}</t-btn>
					<t-btn size="xs" ghost rounded="2xl">忘记密码</t-btn>
				</view>
			</view>
		</view>
		<view v-if="login_username">
			<view class="flex w-full mt-5">
				<view class=" mr-10 flex justify-center align-center">
					<image class="w-30 h-30 rounded-full" src="../../static/imgs/artist/戚薇.jpg" mode=""></image>
				</view>
				<view class="w-100">
					<view class="text-2xl">{{login_username}}<i class="ri-men-line text-primary"></i></view>
					<view class="text-xs mt-3 text-base">个人介绍： <text>往哪裏走都是對的……</text></view>
					<view class="text-xs mt-3 text-base">所在地区： <text>山东省 - 青岛市 </text></view>
					<view class="text-xs mt-3 text-base">年龄： <text>80后</text></view>
					<t-btn size="xs" ghost rounded="2xl">编辑资料</t-btn>
					<t-btn class="mt-3 ml-3" rounded="full" color="base" size="xs" @click="logout">退出</t-btn>
				</view>
			</view>
			<t-divider />
			<view class="w-full">
				<t-menu  size="" horizontal bordered v-model="value">
					<t-menu-item name="1" icon="heart">我的收藏
					<template #right>
						<t-tag class="ml-3" color="error" size="xs" light>108</t-tag>
					</template>
					</t-menu-item>
					<t-menu-item name="2" icon="unorderedlist">我的歌单
					<template #right>
						<t-tag class="ml-3" color="error" size="xs" light>10</t-tag>
					</template>
					</t-menu-item>
					<t-menu-item name="3" icon="eye">我的关注
						<template #right>
							<t-tag class="ml-3" color="error" size="xs" light>99+</t-tag>
						</template>
					</t-menu-item>
				</t-menu>
			</view>
			<view class="w-full">
				<unicloud-db v-slot:default="{data, loading, error, options}" collection="my-music">
					<view v-if="error">{{error.message}}</view>
					<view v-else class="mt-5 mb-5">
						<view class="text-base mb-2" v-for="(item,index) in data" :key="index">
						{{index+1}}-	{{item.title}}  {{item.author}} 
						<t-icon type="play-square" />
						<t-icon type="plus-square" />
						<t-icon type="download" />
						<t-icon type="delete" />
						</view>
					</view>
				</unicloud-db>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex' //引入mapState
	export default {
		name: "my-user",
		data() {
			return {
				value: '1',
				username: 'asstudio',
				password: '11111111',
				submitObj: {
					ac: 'login',
				}
			};
		},
		computed: {
			...mapState({
				hasLogin: (state) => state.user.hasLogin,
				login_username: (state) => state.user.username
			}),
			submitText() {
				const submitText = {
					btntext: "登录",
					smalltext: "还没有账号？马上注册",
				}
				if (this.submitObj.ac == 'reg') {
					submitText.btntext = '注册'
					submitText.smalltext = '我有账号，立即登录'
				}
				return submitText
			},
		},
		mounted() {
			const rules = {
				username: [
					// 校验步骤
					field => {
						// field 将提供校验信息
						if (!field.value) {
							// 返回字符串将作为失败的提示信息
							return `${field.label}必填`
						}
					}
				],
				password: [
					// 校验步骤1
					field => {
						if (!field.value) {
							return `${field.label}必填`
						}
					},
					// 校验步骤2(如果校验步骤1不通过，该步骤将不会执行到)
					field => {
						if (field.value.length < 8) {
							return '密码长度必须大于8'
						}
					}
				]
			}

			// 最后把校验集对象设置到 form 组件中
			this.$refs.form.setRules(rules)
		},
		methods: {
			submitState() {
				if (this.submitObj.ac == 'login') {
					this.submitObj.ac = 'reg'
				} else if (this.submitObj.ac == 'reg') {
					this.submitObj.ac = 'login'
				}
			},
			async sumbit() {
				switch (this.submitObj.ac) {
					case 'reg':
						//注册
						const res = await this.$refs.form.validateAll() // 手动调用校验，返回 res 可查看各个域的校验结果
						// res.status 校验成功与否
						// res.fields 具体域的校验情况
						if (res.status == 'success') {
							await this.$A.register({
								username: this.username,
								password: this.password
							})
						}
						break;
					case 'login':
						await this.$A.login({
							username: this.username,
							password: this.password
						})
						this.submitObj.ac = 'logout'
						break;
					case 'logout':
						await this.$A.logout()
						this.submitObj.ac = 'login'
						break;
					default:
						break;
				}

			},
			async logout() {
				await this.$A.logout()
			}
		}
	}
</script>

<style>

</style>
